02. Getting Started

Getting Started

Introduction

This project requires you to build a multi-section landing page, with a dynamically updating navigational menu based on the amount of content that is added to the page.

Project Rubric

Your project will be evaluated by a Udacity code reviewer according to the Landing Page project rubric. Please review for detailed project requirements.

Get the Starter Code

If you'd like to start from scratch without any files, you are encouraged to do so! You learn the most by developing on your own! But, it can be a bit challenging having to start from scratch, so we do provide a starter project (i.e., a "skeleton") to use.

You can download the starter code here by cloning the specific branch 'refresh-2019'.

The starter code has a static, non-interactive version of the project so you can get a jump-start on development!

JavaScript and the DOM

Great! You now have the starter code. Before moving forward, make sure you are comfortable with the content from the JavaScript and the DOM course. Ask yourself:

  • What is the Document?
  • What are events?
    • How do we listen for them?
    • How does event delegation help us avoid too many events?
    • Check Working with Browser Events in JavaScript and the DOM for a refresher if needed
  • How can we access elements with the following two methods? What are the differences between them?
  • How do you use getElementbyId() to select a DOM element by its id?
  • We can also access elements with getElementsByClassName(). What does this method return, and how do you use it?
  • How do you use the className property? What does it return, and why would it be useful?
  • What are the different methods for classList?
    • Hint: the add(), remove(), and toggle() methods look particularly useful…
  • Every element has an innerHTML property that represents the markup of the element's content. How can you leverage this property to get and set content?

Next Concept